<template>
	<view class="addgoodinfo">
		<view class="item">
			<view class="title">
				文字描述
			</view>
			<view class="content">
				<textarea v-model="describe" placeholder-style="color:#ddd" placeholder="请对商品进行说明" />
				</view>
		</view>
		<view class="item">
			<view class="title">
				图片上传<text>真实的食材图片更易获得顾客的青睐</text>
			</view>
			<view class="content imgBox">
			
				<!-- <imageUpload @onUploadChange='handleChooseImage' :uploadType="'identify'" :type="'md'" :prop_photos='image'/> -->
				<imageUpload :cdn="true"  checkType="md" v-model="image" />
				
			</view>
		</view>
		<view :class="active?'add active':'add'"  @click="add">
			确定
		</view>
		<image-compress style="position: absolute; top: 0rpx; overflow: hidden;" ref='imageCompress' />
	</view>
</template>

<script>
	import imageUpload from '../../components/public/upload-gallery.vue'
	export default{
		data(){
			return{
				image:[],
 				describe:"",
				active:"",
			}
		},
		computed:{
			host (){
				return this.$baseHost.car
			}
		},
		components: {
			imageUpload
		},
		onLoad(option) {
			this.image = option.image?option.image.split(','):[]
			if(option.describe != "undefined") {
				
				this.describe = option.describe;
			}
		},
		watch:{
			describe(newData){
				if(newData != ''){
					this.active = true
				}
				else{
					this.active = false
				}
			}
		},
		methods:{
			handleChooseImage(item, list) {
				this.image = list
			},
			add(){
				if(this.active){
					let that = this
					let pages = getCurrentPages(); // 当前页面
					let prePage = pages[pages.length - 2]; // 前一个页面
					prePage.setData({   //把需要回传的值保存到上一个页面
					      describe: that.describe,
						  image:that.image
					    });
					uni.navigateBack();
				}
				
			}
		}
	}
</script>

<style lang="less">
	.addgoodinfo{
		padding:30rpx;
	}
	.title{
		font-size: 36rpx;
		color: #333333;
		text{
			font-size: 24rpx;
			color: #CCCCCC;
		}
	}
	.item{
		.content{
			textarea{
				width: 100%;
				height: 200rpx;
			}
		}
	}
	.imgBox {
		width: 100%;
		min-height: 240rpx;
		padding: 10rpx 0;
		image {
			width: 200rpx;
			float: left;
			margin: 0 10rpx;
			height: 200rpx;
		}
	}
	.add{
		width: 690rpx;
		margin: 0 auto;
		height: 84rpx;
		background:rgba(245,245,245,1);
		border-radius:12rpx;
		margin-top: 48rpx;
		color: #999999;
		line-height: 84rpx;
		text-align: center;
		&.active{
			background-color: #E41805;
			color: #fff;
		}
	}
	.chooseImage {
		width: 220rpx;
		height: 220rpx;
		background-color: #F2F2F2;
		float: left;
		margin: 6rpx;
		font-size: 24rpx;
		color: #c5c5c5;
		position: relative;
	
		.iconadd {
			font-size: 50rpx;
		}
	
		&.chooseImage2 {
			width: 200rpx;
			height: 200rpx;
		}
	
		image {
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
	}
</style>
